<template>
  <div class="countdown">
    <span>{{ date.h ? date.h : 0 }}</span
    >&ensp;:&ensp;<span>{{ date.m ? date.m : 0 }}</span
    >&ensp;:&ensp;<span>{{ date.s ? date.s : 0 }}</span>
  </div>
</template>

<script setup>
/* 倒计时组件 */
import { ref, onMounted } from 'vue'
let time = ref(21600)
let date = ref({})
function countdown() {
  setTimeout(() => {
    time.value--
    var h = Math.floor(time.value / 3600)
    var m = Math.floor(Math.floor(time.value / 60) - h * 60)
    var s = time.value - m * 60 - h * 3600
    if ((h + '').length === 1) {
      h = '0' + h
    }
    if ((m + '').length === 1) {
      m = '0' + m
    }
    if ((s + '').length === 1) {
      s = '0' + s
    }
    date.value.h = h
    date.value.m = m
    date.value.s = s
    countdown()
  }, 1000)
}
onMounted(() => {
  countdown()
})
</script>

<style lang='less' scoped>
.countdown {
  margin: 10px 0px;
  color: red;
  font-weight: 600;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
}
span {
  background-color: red;
  color: white;
  border-radius: 3px;
  padding: 3px;
  font-size: 15px;
}
</style>
